<template>
	<view class="warp " >
		<view class="top flex">
			<image src="../../static/success.png" style="width: 100rpx;height: 100rpx;"></image>
			<view class="top-word">
				<view class="topword1">维修已完成</view>
				<view class="topword2">请评价一下为您服务的维修员吧</view>
			</view>
		</view>
		<view class="center">
			<view class="content " style="text-align: center;">
				<view class="c-word1">评价维修员</view>
				<view class="star flex" style="margin-top: 50rpx;">
					<uni-rate :margin="20" v-model="value" @change="onChange" />
				</view>
				<view class="choose flex">
					<uniChcek v-model="activearr" min="0" max="6" mode="tag" selectedColor="#5490FE"
						selectedTextColor="#ffffff" :localdata="commitList" :multiple="true" @change="check"></uniChcek>
				</view>
				<view class="uni-textarea">
					<textarea placeholder-style="color:#999999" @blur="bindTextAreaBlur" placeholder="请添加您的意见或建议" />
				</view>
				<view class="mt30 footer">
					<button class=" bmain cff" style="border-radius: 50rpx;" @click="sumbit">提交</button>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		getCommentType,
		addWaterComment
	} from '../../api/api.js'
	import uniRate from '../../components/uni-ui/lib/uni-rate/uni-rate.vue'
	import uniChcek from '../../components/uni-ui/lib/uni-data-checkbox/uni-data-checkbox.vue'
	export default {
		components: {
			uniRate,
			uniChcek
		},
		data() {
			return {
				id: "",
				value: "",
				commitList: [],
				activearr: [],
				content: "",
			}
		},
		onLoad(opt) {
			this.id = opt.id
			this.datainit()
		},
		methods: {
			bindTextAreaBlur(e) {
				console.log(e)
				this.content = e.detail.value
			},
			// 选择评价类型
			check(e) {
				console.log(e, this.activearr)
			},
			// 选择星星
			onChange(e) {
				console.log('星星', e)
			},
			sumbit() {
				let comment_ids = ''
				comment_ids = this.activearr.toString()
				if (!comment_ids || !this.value || !this.content) {
					uni.showToast({
						title: "请完善信息后再尝试!",
						icon: "none"
					})
					return
				}
				let data = {
					id: this.id,
					content: this.content,
					star: this.value,
					comment_ids: comment_ids
				}
				console.log(data)
				addWaterComment(data).then(res => {
					if(res.status == 200){
						uni.showToast({
							title:"评价成功!",
							icon:"none"
						})
						uni.redirectTo({
							url:"/pages/index/index"
						})
					}
				})
			},
			// 初始化
			datainit() {
				getCommentType().then(res => {
					this.commitList = res.data
					res.data.forEach(item => {
						item.text = item.cate_name
						item.value = item.id
					})
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.top {
		width: 100%;
		background-color: #FFFFFF;
		height: 300rpx;

		.top-word {
			margin-left: 20rpx;

			.topword1 {
				color: #333333;
				font-weight: 500;
				font-size: 32rpx;
			}

			.topword2 {
				color: #666666;
				font-size: 24rpx;
			}
		}

	}

	.center {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		width: 100%;
		margin-top: 20rpx;
		padding-top: 30rpx;
		background-color: #FFFFFF;
		height: 100%;

		.c-word1 {
			color: #333333;
			font-size: 28rpx;
		}

		.choose {
			width: 100%;
			padding: 30rpx 50rpx;
		}
	}

	/deep/ .uni-data-checklist .checklist-group .checklist-box.is--tag {
		margin-right: 10px;
		padding: 5px 10px;
		border: 0px #FFFFFF solid;
		border-radius: 40rpx;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 177rpx;
		text-align: center;
		background-color: #ECF6FF;
	}

	/deep/ .uni-data-checklist .checklist-group .checklist-box.is--tag .checklist-text {
		// color: #5490FE !important;
		width: 120%;
		text-align: center;
		// margin-left: 50%;
		// transform: translateX(-50%);
	}

	.uni-textarea {
		// display: flex;
		// justify-content: center;
		// align-items: center;
		margin-left: 50%;
		transform: translateX(-50%);
		border-radius: 25rpx;
		width: 90%;
		height: 400rpx;
		background-color: #ECF6FF;
	}

	.footer {
		margin-left: 50%;
		transform: translateX(-50%);
		width: 60%;
	}
</style>
